<template>
    <div>
        <!-- 
            vue中操作DOM步骤
            1、给要操作的元素设置一个ref属性
            2、this.$refs.ref属性值
            
         -->
         <h2>$refs的使用</h2>
        <div class="box" @click="changeColor" ref="boxEle"></div>
        <hr>
        <h2>模拟v-model指令</h2>
        <input type="text" v-bind:value="msg" v-on:input="operMsg" ref="inputEle">
        <hr>
        <h2>v-model相关修饰符</h2>
        搜索:<input type="text" v-model.lazy="message"><br>
        年龄: <input type="text" v-model.number="age"><br>
        账号: <input type="text" v-model.trim="account">
        <button @click="register">注册</button>
    </div>
</template>

<script>
export default {
  data(){
    return{
        msg:'Hello Giles',
        message:'',
        age:'',
        account:''
    }
  },
  methods:{
    changeColor(){
        //此处this是VueComponent对象的实例
       console.log(this.$refs.boxEle);
       this.$refs.boxEle.style.backgroundColor="red"
    },
    operMsg(){
        //获取input的文本框中的值，然后再复制给data中的msg
       this.msg=this.$refs.inputEle.value
    },
    register(){
        console.log('虚岁',this.age+1);
    }
  }
}
</script>

<style>
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        border-radius: 50%;
    }
    .bgc{
        background-color: springgreen;
    }
</style>